<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-34-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-34-t.html">Full version</a>, <a href="basic-animate-elem-34-t.html">Basic version</a>, <a href="tiny-animate-elem-34-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="full-animate-elem-33-t.html">animate-elem-33-t ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-animate-elem-36-t.html">→ animate-elem-36-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-34-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-34-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-34-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-34-t" src="../png/full-animate-elem-34-t.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
         <p>
            The purpose of this test is to test animation of attributes points and fill-rule.
         </p>
         <p>
            The test consists of 2 sub-tests. The first test is a polygon shaped as a digit. The polygon 
            has an animation on its vertex points which  morphs the polygon between the numbers 1, 2, 3 
            and 4. The gray outlines indicates the expected position of the polygon at 1, 2, 3 and 4s.
            The second test is 4 paths in a u-shape. They have animated fill-rules. There initial 
            fill-rules are, from left to right, nonzero, evenodd, evenodd (by default value) and evenodd 
            (by default value) The expected result is that one path at a time is filled. The other three 
            paths are not filled but have the u-shape. Which path that should be filled at 
            which time is indicated by the number above it (indicating time in seconds). To enhance the 
            difference between the filled path and the rest, the filled path should always have the 
            same color as the morphing polygon. This is achieved by a discrete color animation.
         </p>

		</div>
<div class="linkbar"> <p>
				<a href="full-animate-elem-33-t.html">animate-elem-33-t ←</a>
				<a href="full-index.html">index</a>
				<a href="full-animate-elem-36-t.html">→ animate-elem-36-t</a>
						</p></div>
</body>
</html>
